/* === Pull To Refresh === */
.pull-to-refresh-layer {
    position:absolute; 
    position: relative;
    margin-top: -@toolbarSize;
    left:0; 
    top:0; 
    width:100%; 
    height:@toolbarSize; 
    
    .preloader {
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -10px;
        margin-top: -10px;
        padding-left: 0;
        padding-right: 0;
        visibility: hidden;
        width: 20px;
        height: 20px;
        background-size: 20px 20px;
        .encoded-svg-background("<svg viewBox='0 0 33 33' xmlns='http://www.w3.org/2000/svg'><path fill='@{color-Cg}' fill-opacity='.3' d='M16.424 5C7.25 5 5 12.087 5 15.465c0 9.93 11.837 12.38 17.71 12.38h.136c.13 0 .238-.105.238-.236 0-.075-.034-.14-.086-.183l-1.73-1.457c-.125-.107-.193-.275-.163-.45.03-.174.15-.31.303-.37l-.227.088c3.72-1.472 6.666-4.994 6.666-9.773C27.846 12.087 25.646 5 16.424 5m-6.65 8.585c-.525 0-.95-.424-.95-.947 0-.426.282-.786.67-.905v-.003c.688-.217 1.42-.334 2.182-.334.77 0 1.512.12 2.21.342l-.002.004c.373.127.643.48.643.896 0 .523-.425.947-.95.947-.097 0-.19-.015-.28-.043v.002c-.512-.162-1.056-.25-1.62-.25-.555 0-1.09.085-1.59.24l-.002-.003c-.098.036-.203.055-.312.055m9.505.01c-.524 0-.95-.425-.95-.947 0-.426.283-.786.67-.905v-.003c.69-.217 1.422-.334 2.183-.334.77 0 1.513.12 2.21.34l-.002.006c.374.127.643.48.643.896 0 .522-.423.947-.947.947-.098 0-.193-.016-.282-.043v.002c-.51-.162-1.055-.25-1.62-.25-.553 0-1.087.084-1.59.24v-.003c-.098.035-.203.055-.312.055m.96 4.743c-.52 0-.944-.422-.944-.943V15.49c0-.52.423-.942.945-.942.52 0 .943.422.943.943v1.905c0 .52-.423.943-.944.943m-7.613 0c-.522 0-.944-.422-.944-.943V15.49c0-.52.422-.942.944-.942.52 0 .944.422.944.943v1.905c0 .52-.422.943-.943.943'></path></svg>");

        &:before {
            width: 20px;
            height: 20px;
            background-size: 20px 20px;
            .encoded-svg-background("<svg viewBox='0 0 33 33' xmlns='http://www.w3.org/2000/svg'><path fill='@{color-Cg}' d='M29.026 5.765l-1.08 1.08c4.7 5.562 4.7 13.74 0 19.304l1.08 1.08c5.29-6.164 5.29-15.302 0-21.465zm-22.18 22.18l-1.08 1.08c6.292 5.4 15.685 5.29 21.847-.336l-1.076-1.078c-5.566 5.035-13.998 5.144-19.69.333zM5.383 6.46L4.306 5.38c-5.74 6.29-5.742 15.942 0 22.23l1.077-1.077C.235 20.845.235 12.15 5.383 6.46zm.383-2.49l1.08 1.08C12.54.24 20.972.346 26.536 5.38l1.078-1.078C21.452-1.322 12.058-1.43 5.766 3.97z'></path></svg>");
        }
    }
    .pull-to-refresh-arrow {
        width: 13px;
        height: 20px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -6px;
        margin-top: -10px;
        background: no-repeat center;
        .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 40'><polygon points='9,22 9,0 17,0 17,22 26,22 13.5,40 0,22' fill='#8c8c8c'/></svg>");
        background-size: 13px 20px;
        z-index: 10;
        .transform(rotate(0deg) translate3d(0,0,0));
        .transition(300ms);
    }
    
}
.pull-to-refresh-content {
    &.pull-to-refresh-no-navbar {
        margin-top: -@toolbarSize;
        height: ~"-webkit-calc(100% + @{toolbarSize})";
        height: ~"-moz-calc(100% + @{toolbarSize})";
        height: ~"calc(100% + @{toolbarSize})";
        .pull-to-refresh-layer {
            margin-top: 0;
        }
    }
    &.transitioning, &.refreshing {
        .transition(400ms); 
    }
    &:not(.refreshing) {
        .pull-to-refresh-layer .preloader {
            .animation(none);
        }
    }
    &.refreshing {
        .translate3d(0,@toolbarSize,0);
        .pull-to-refresh-arrow {
            visibility: hidden;
            .transition(0ms);
        }
        .preloader {
            visibility: visible;
        }   
    }
    &.pull-up {
        .pull-to-refresh-arrow {
            .transform(rotate(180deg) translate3d(0,0,0));
        }
    }
    
}
